<template>
  <view class="card-container">
    <!-- 1. 图片区域：高度由图片比例决定 -->
    <view class="img-box" :style="boxStyle">
      <image
        class="card-image"
        :src="props.src"
        :mode="computedMode"
        :fade-show="true"
        lazy-load
        @load="onImageLoad"
        @error="onImageError"
        @tap="handleImageClick"
      />
      <!-- 骨架屏 -->
      <view v-if="!imageLoaded" class="img-skeleton" />
      <view class="card-image-overlay">
        <text class="card-tag">精选</text>
      </view>
    </view>

    <!-- 2. 内容区域保持不变 -->
    <view class="card-content">
      <view class="card-header">
        <text class="card-title">{{ props.title }}</text>
      </view>
      <view class="card-description">
        <text class="card-text">{{ props.content }}</text>
      </view>
      <view class="card-footer">
        <view class="card-meta">
          <text class="card-date">{{ formatDate() }}</text>
          <text class="card-views">1.2k 浏览</text>
        </view>
      </view>
    </view>

      
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  src:     { type: String, default: '' },
  title:   { type: String, default: '' },
  content: { type: String, default: '' },
  imageList: { type: Array, default: () => [] },
})

const imageLoaded = ref(false)
const imgW = ref(0)
const imgH = ref(0)

const onImageLoad = (e) => {
  // 获取图片的宽高
  imgW.value  = e.detail.width
  imgH.value  = e.detail.height
  imageLoaded.value = true
}
const onImageError = () => { imageLoaded.value = true }

// 1. 横竖图判断
// - 横图 （宽度 > 高度）：使用 widthFix 模式，保持宽度固定，高度自适应
// - 竖图 （高度 ≥ 宽度）：使用 heightFix 模式，保持高度固定，宽度自适应
const computedMode = computed(() =>
  imgW.value > imgH.value ? 'widthFix' : 'heightFix'
)

// 2. 外层盒子高宽比（用 padding-top 撑开，防止闪跳）
const boxStyle = computed(() => {
  if (!imgW.value || !imgH.value) {
    // 没加载完先给一个默认 4:3 占位
    return 'padding-top: 75%'
  }
  const ratio = (imgH.value / imgW.value) * 100
  return `padding-top: ${ratio}%`
})

const formatDate = () => {
  const d = new Date()
  return `${d.getMonth() + 1}月${d.getDate()}日`
}
// 点击进行图片预览 
const handleImageClick = () => { 
  // 如果父组件有传入imageList，就进行图片预览
  if (props.imageList && props.imageList.length > 0) {
    uni.previewImage({
      // map也可以在父组件传参时候用
      urls: props.imageList.map((item) => item.url),
      current: props.src,
      indicator: "default", // 可选：显示指示器
      loop: true, // 可选：是否循环播放
    })
  }
  else { 
    // 如果没有传入imageList，就直接预览当前图片
    uni.previewImage({
      urls: [props.src],
      current: props.src,
      indicator: "default", // 可选：显示指示器
    })
  }
}
</script>

<style scoped lang="scss">
.card-container{
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,.1);
  overflow: hidden;
}

/* 图片区域：用 padding-top 撑出高度，保持比例 */
.img-box{
  position: relative;
  width: 100%;
  height: 0;          // 高度由 padding-top 撑开
  overflow: hidden;
  background: #f5f7fa;
}

.card-image{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 骨架屏 */
.img-skeleton{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
@keyframes loading{
  0%  { background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* 精选标签 */
.card-image-overlay{
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  background: rgba(255,107,107,.9);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  .card-tag{
    color: #fff;
    font-size: 24rpx;
    font-weight: 600;
  }
}

/* 以下内容保持你原来的样式即可 */
.card-content{ padding: 30rpx; }
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
  .card-title{
    flex: 1;
    font-size: 32rpx;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.4;
  }
}
.card-description{
  margin-bottom: 24rpx;
  .card-text{
    font-size: 28rpx;
    color: #7f8c8d;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.card-footer{
  border-top: 1rpx solid #ecf0f1;
  padding-top: 20rpx;
  .card-meta{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #95a5a6;
  }
}
</style>